<template>
    <el-menu :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
        text-color="#fff" :unique-opened="true">
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <Setting />
                </el-icon>
                <span>商品管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="1-1">商品列表</el-menu-item>
                <el-menu-item index="1-2">商品分类</el-menu-item>
                <el-menu-item index="1-3">品牌管理</el-menu-item>
                <el-menu-item index="1-4">商品属性管理</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
                <el-icon>
                    <Collection />
                </el-icon>
                <span>订单中心</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="2-1">订单列表</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
            <template #title>
                <el-icon>
                    <Service />
                </el-icon>
                <span>店铺运营</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="3-1">专题管理</el-menu-item>
                <el-menu-item index="3-2">运营管理</el-menu-item>
            </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
</template>
  
  
<script lang="ts" setup>
import { ref } from "vue";
import { Document, Menu as Service, Collection, Setting } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
// const handleRouter = () => {
//     router.push("/good");
// };
const isCollapse = ref(false);
</script>
  
  
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
    min-height: 400px;
}
.el-menu{
    border:none;
}
</style>